Top React Libraries — Event Listeners, Text Editors, and Progress Spinners

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-event-listener

We can use the react-event-listener package to add event listeners for various events emitted by the document or window.

To install it, we can run:

npm i react-event-listener

Then we can use it by writing:

import React from "react";
import EventListener, { withOptions } from "react-event-listener";

export default class App extends React.Component {
  handleResize = () => {
    console.log("resize");
  };

  handleScroll = () => {
    console.log("scroll");
  };

  handleMouseMove = () => {
    console.log("mousemove");
  };

  render() {
    return (
      <div>
        <EventListener
          target="window"
          onResize={this.handleResize}
          onScroll={withOptions(this.handleScroll, {
            passive: true,
            capture: false
          })}
        />
        <EventListener
          target={document}
          onMouseMoveCapture={this.handleMouseMove}
        />
      </div>
    );
  }
}

We use the EventListener component to listen to the events we want.

The target is the target element to listen to.

onResize lets us attach a resize event listener for the target element.

onScroll lets us attach an event listener for the scrolling to the target.

We can add some options with the withOptions function.

It lets us change how to attach the listener. We disable event capturing with capture set to false .

passive means preventDefault isn’t called in the handler.

We have a 2nd listener to listen to events emitted by document .

We have the onMouseMoveCapture prop to listen to mouse move events.

slate-react

slate-react lets us add a text editor to our React app

To install it, we run:

npm i slate-react

Then to install the editor, we write:

import React, { useState, useMemo } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import { withHistory } from "slate-history";

const App = () => {
  const [value, setValue] = useState(initialValue);
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
  return (
    <Slate editor={editor} value={value} onChange={value => setValue(value)}>
      <Editable placeholder="Enter some plain text..." />
    </Slate>
  );
};

const initialValue = [
  {
    children: [{ text: "hello world" }]
  }
];

export default App;

We use the Slate component to add the editor.

It’s a plain text editor that has no options.

editor has the slate editor instance.

value is the value entered.

onChange updates the value state.

Editable has the text editor with the placeholder having the placeholder.

The initialValue has the initial value we use for value .

We can add other kinds of editors, including rich text editors, Markdown editors, and more.

It comes with no styles for anything, so we’ve to add them ourselves.

rc-progress

The rc-progress package lets us add progress spinners or bars.

To install it, we run:

npm i rc-progress

Then we can use it by writing:

import React from "react";
import { Line, Circle } from "rc-progress";

const App = () => {
  return (
    <>
      <Line percent="10" strokeWidth="4" strokeColor="green" />
      <Circle percent="10" strokeWidth="4" strokeColor="green" />
    </>
  );
};

export default App;

We used the Line and Circle from the package with some props.

strokeColor has the color for the filled part.

strokeWidth has the width of the filled part.

percent has the percentage complete.

We can change the class names, styles, and gaps for the components.

Conclusion

react-event-listener lets us add event listeners for window and document.

slate-react is a text editor component that comes with no styles.

rc-progress is the progress bar or spinner for us to use.